<template>
  <div class="serach-result">
    <!-- 导航栏 -->
    <van-nav-bar
      title="搜索结果"
      left-arrow
      fixed
      @click-left="$router.back()"
    />

    <!-- 文章列表 -->
    <van-list
      class="article-list"
      v-model="loading"
      :finished="finished"
      finished-text="到底了"
      @load="onLoad"
    >
      <van-cell
        v-for="article in list"
        :key="article.art_id.toString()"
        :title="article.title"
        @click="$router.push('/article/' + article.art_id.toString())"
      />
    </van-list>

  </div>
</template>

<script>
import { getSearchRequest } from '@/api/search.js'
export default {
  name: 'SearchResult',
  data () {
    return {
      list: [], // 搜索结果
      loading: false, // 加载状态
      finished: false, // 数据全部加载完成
      page: 1 // 当前页码
    }
  },

  methods: {
    async onLoad () {
      // 1 发请求
      const res = await getSearchRequest(this.$route.query.keyword, this.page)
      const arr = res.data.data.results
      // 2 求回的数据填充到list中
      this.list.push(...arr)
      // 3. 手动结束加载状态
      this.loading = false
      // 4. 判断是否还有更多数据
      this.finished = !arr.length
      // 5. 页码+1
      this.page++
    }
  }
}
</script>

<style lang="less" scoped>
.serach-result {
  height: 100%;
  overflow: auto;
  .article-list {
    margin-top: 39px;
  }
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
</style>
